<template>
  <div>
    <h3 id="user-manager-title">用户管理(只有查看权限)</h3>
    <!--   搜索框   -->
    <div id="search-box">
      <el-input class="search-key" placeholder="请输入搜索ID"></el-input>
      <el-button id="search-btn" type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <div id="table-info">
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="sequence"
            label="序号"
            width="130">
        </el-table-column>
        <el-table-column
            prop="name"
            label="用户姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="180">
        </el-table-column>
        <el-table-column
            prop="nickname"
            label="昵称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="lesseeName"
            label="所属租户姓名"
            width="180">
        </el-table-column>
      </el-table>
    </div>
    <!--分页部分  -->
    <div class="paging-box">
      <i class="el-icon-d-arrow-left"></i>
      <i class="el-icon-arrow-left"></i>
      <label><span>1/20</span>页</label>
      <i class="el-icon-arrow-right"></i>
      <i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserManage",
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [{
        sequence:1,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:2,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:3,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:4,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:5,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:6,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:7,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:8,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }, {
        sequence:9,
        name: '王小虎',
        sex: "男",
        nickname: '小胡',
        lesseeName: "租户一号小明",
      }]
    }
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

#table-info {
  height: 70%;
  overflow: scroll;
}

#user-manager-title{
  background-color: #1b6d85;
  text-align: center;
}
/*搜索框*/
#search-box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.search-key{
  width: 75%;
}
#search-btn{
  height: 40px;
}
.paging-box{
  position: relative;
  background-color: #5cb85c;
  text-align: right;
}
</style>